<template>
  <div>
    <div class="nav">
      <div class="left-nav">
        <i class="iconfont icon-music"></i>
        <span>网易云音乐</span>
      </div>
      <div class="right-nav">
        <p>发现音乐</p>
      </div>
    </div>
    <div class="img">
      <img src="../assets/imgs/Snipaste_2022-07-07_20-10-08.png" alt="" />
    </div>
    
    <div class="searchText" @change="isShow" :v-show="display">
      <i class="iconfont icon-pointing"></i>
      <span>请您搜索您想要的歌曲</span>
    </div>
    <div class="inputMusic">
      <el-input placeholder="请输入音乐" v-model="input" clearable @change="getInputValue" > </el-input>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {get} from '../api/music'
export default {
    data() {
      return {
        input: '',
        display:false,
      }
    },
  methods: {
    //输入框的内容
    async getInputValue(){
        console.log(this.input);

        sessionStorage.setItem('value',JSON.stringify(this.input))
        let res = await get(this.input)
        console.log(res,'hhh');
        if(this.input){
            this.$router.push('/search')
        }
    },
    isShow(){
        this.display=false
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  display: flex;

  align-items: center;
  background: black;
  .left-nav {
    margin-left: 130px;
    color: #fff;
    letter-spacing: 2px;
    .icon-music {
      color: red;
      margin-right: 5px;
    }
  }
  .right-nav {
    margin-left: 170px;
    color: #ccc;
  }
}
.img {
  width: 100%;
  margin-bottom: 50px;
  img {
    width: 100%;
  }
}
.searchText {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  i {
    margin-right: 5px;
    color: yellowgreen;
  }
  span {
    color: red;
  }
}
.inputMusic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 30px;
  .el-input--suffix {
    width: 200px;
    height: 30px;
    padding-left: 5px;
    
    outline: none;
  }
}
</style>